<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
	<script type="text/javascript">
		$(function () {
            //获取所有的li标签,注册进入和离开事件
            $("#box>ul>li").mouseover(function () {
                $(this).siblings("li").css("width","100px");
                $(this).css("width","800px");
            });
            $("#box>ul>li").mouseout(function () {
                //find("条件")获取的是调用该方法的对象中的所有的元素
                //内部循环,外部不需要写循环,隐式迭代
                $(this).parent().find("li").css("width","240px");
            });
        });
	</script>
</head>
<body>
	<div id="box">
		<ul>
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
	</div>
</body>
</html>